<template>
  <div>
    <Button type="primary" @click="exportExcel" v-has="icon/exportIcon">excel导出</Button>
    <Button type="primary" @click="downExcel" v-has="icon/downTemplate">下载上传模板</Button>
    <Button type="primary" @click="uploadExcel = true" v-has="icon/uploadExcel">批量上传图标</Button>
    <Button type="primary" @click="addIcon" v-has="icon/saveOrUpdate">新增图标</Button>
    <i-table :columns="columns1" :data="data1"></i-table>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--上传excel对话框-->
    <Modal v-model="uploadExcel" title="上传excel" @on-ok="ok" @on-cancel="cancel">
      <Upload type="drag" :headers="header" :on-success="handleSuccess" :action="uploadUrl">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>Click or drag files here to upload</p>
        </div>
      </Upload>
      <!--失败原因,默认不展示-->
      <div v-show="hasFail">
        <i-table :columns="failColumns" :data="failData"></i-table>
      </div>
    </Modal>

    <!--新增/编辑icon图标-->
    <Modal v-model="operDig" :title="iconTitle" @on-ok="ok" @on-cancel="cancel">
      <Form :model="iconObj" :label-width="80" ref="formCustom" :rules="ruleForm">
        <FormItem label="图标名称" prop="iconType">
          <Input v-model="iconObj.type" placeholder="图标名称,不能和已存在图标重名..." />
        </FormItem>

        <FormItem label="图标预览" v-show="showIcon">
          <Icon size="25" :type="iconObj.type" />
        </FormItem>

        <FormItem label="图标大小">
          <Input v-model="iconObj.size" />
        </FormItem>

        <FormItem label="图标颜色">
          <Input v-model="iconObj.coler" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitIcon">提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { dealPageData } from "@/utils/myPageUtil";
import { Button } from "iview";
import { recommendBlog } from "@/api/blogApi";
import {
  recommendPage,
  topRecommend,
  removeRecommend
} from "@/api/blogRecommend";
import {
  uploadUrl,
  iconPage,
  deleteIcon,
  downTemplate,
  getById,
  saveOrUpdate,
  topIcon,
  exportExcel
} from "@/api/iconApi";
import { header } from "@/api/uploadFile";

export default {
  name: "iconAdmin",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      uploadExcel: false,
      uploadUrl: uploadUrl, //上传excel路径
      header: header,
      hasFail: false,
      iconTitle: "", //编辑/新增标题
      showIcon: false, //icon图标预览
      operDig: false,
      iconObj: {
        //icon对象
        type: "",
        size: 18,
        color: "",
        id: 0
      },
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      /*表单校验*/
      ruleForm: {
        iconType: [
          { required: false, message: "icon图标名称不能为空", trigger: "blur" }
        ]
      },
      failColumns: [
        {
          title: "失败行号",
          key: "rowNum"
        },
        {
          title: "失败原因",
          key: "failReason"
        }
      ],
      failData: [],
      columns1: [
        {
          title: "图标名称",
          key: "type"
        },
        {
          title: "图标预览",
          key: "type",
          render: (h, params) => {
            return h("div", [
              h("icon", {
                props: {
                  type: params.row.type,
                  size: 25
                }
              })
            ]);
          }
        },
        {
          title: "图标大小",
          key: "size"
        },
        {
          title: "图标颜色",
          key: "color"
        },
        {
          title: "上传者",
          key: "creator"
        },
        {
          title: "修改者",
          key: "editor"
        },
        {
          title: "是否禁用",
          key: "isOriginal",
          render: (h, params) => {
            if (params.row.delFlag == 0) {
              return h("span", "是");
            } else {
              return h("span", "否");
            }
          }
        },
        {
          title: "上传时间",
          key: "createTime"
        },
        {
          title: "修改时间",
          key: "updateTime"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button,
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.topIcon(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "icon/topIcon"
                    }
                  ]
                },
                "置顶"
              ),
              h(
                Button,
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.editIcon(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "icon/saveOrUpdate"
                    }
                  ]
                },
                "编辑"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteIcon(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "icon/deleteIcon"
                    }
                  ]
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  methods: {
    changePage(index) {
      iconPage(index, this.pageData.size).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    topRecommend(id) {
      let that = this;
      //推荐置顶
      topRecommend(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("推荐置顶成功");
          //刷新页面
          that.reload();
        }
      });
    },
    deleteIcon(id) {
      //删除推荐
      deleteIcon(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("删除图标成功");
          this.reload();
        }
      });
    },
    ok() {
      this.reload();
    },
    cancel() {
      this.reload();
    },
    handleSuccess(response, file, fileList) {
      //处理失败原因
      if (response.code == 200) {
        if (response.data.length > 0) {
          this.failData = response.data;
          //展示原因
          this.hasFail = true;
        } else {
          //关闭上传页面,刷新页面
          this.uploadExcel = false;
          this.reload();
        }
      }
    },
    downExcel() {
      downTemplate();
    },
    //新增/编辑icon表单提交
    submitIcon() {
      this.$refs.formCustom.validate(valid => {
        if (valid) {
          saveOrUpdate(this.iconObj).then(res => {
            if (res.data.code == 200) {
              this.$Message.info("操作成功");
              this.operDig = false;
              this.reload();
            }
          });
        }
      });
    },
    editIcon(id) {
      this.iconTitle = "编辑图标";
      //打开对话框
      this.operDig = true;
      //查询图标信息
      getById(id).then(res => {
        if (res.data.code == 200) {
          let obj = res.data.data;
          this.iconObj.type = obj.type;
          this.iconObj.id = obj.id;
          this.iconObj.size = obj.size;
          this.iconObj.color = obj.color;
        }
      });
    },
    addIcon() {
      this.iconTitle = "新增图标";
      //icon详情清空
      this.iconObj = {};
      this.operDig = true;
    },
    topIcon(id) {
      topIcon(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("置顶成功");
          this.reload();
        }
      });
    },
    exportExcel() {
      exportExcel();
    }
  },
  created() {
    //加载分页数据
    iconPage(this.pageData.current, this.pageData.size).then(res => {
      if (res.data.code == 200) {
        //处理分页
        this.pageData = dealPageData(res.data);
        this.data1 = this.pageData.data;
      }
    });
  },
  watch: {
    "iconObj.type": {
      handler: function(a, b) {
        this.showIcon = true;
      }
    }
  }
};
</script>

<style scoped>
</style>
